// pages/menu/menu.js
Page({
  data: {
    // banner的轮播图数组
    swiperArr: [
      "/images/banner/menubanner1.jpg",
      "/images/banner/menubanner2.jpg",
      "/images/banner/menubanner3.jpg"
    ],
    menuArr: [{
        "id": 0,
        "title": "人气Top",
        "subArr": [{
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "拿铁"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "桃桃芝士红宝石"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "咖啡风味安慕希"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "陨石拿铁"
          }
        ]
      },
      {
        "id": 1,
        "title": "大师咖啡",
        "subArr": [{
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "冲绳黑糖拿铁"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "陨石拿铁"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "拿铁"
          }
        ]
      },
      {
        "id": 2,
        "title": "小鹿茶精选",
        "subArr": [{
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "标准美式"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "加浓美式"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "焦糖标准美式"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "焦糖加浓拿铁"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "银河气泡美式"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "银河气泡美式"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "银河气泡美式"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "银河气泡美式"
          }
        ]
      },
      {
        "id": 3,
        "title": "瑞纳冰",
        "subArr": [{
          "imgSrc": "/images/menu/1-1.jpg",
          "imgDesc": "乐岛桃桃冰"
        }]
      },
      {
        "id": 4,
        "title": "鲜榨果蔬汁",
        "subArr": [{
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "NFC鲜榨橙汁"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "NFC鲜榨西柚汁"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "猕猴桃复合果汁"
          }
        ]
      },
      {
        "id": 5,
        "title": "经典饮品",
        "subArr": [{
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "巧克力"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "纯牛奶"
          }
        ]
      },
      {
        "id": 6,
        "title": "健康轻食",
        "subArr": [{
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "京味烤鸭鲜蔬卷"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "夏威夷菠萝火山卷"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "火腿芝士羊角"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "鸡肉卷"
          }
        ]
      }
    ],
    // 左侧的id
    leftId: 'left0',
    // 左侧当前项
    leftActiveNum: 0,
    // 右侧的id
    rightId: 'right0',
    // 右侧高度是数组
    heightArr: []
  },
  // 获取每个区块的高度(操作dom)  -- mounted
  onReady() {
    let _this = this;
    setTimeout(() => {
      let initArr = [0]; // 初始的数组
      let initNum = 0; // 初始的数值
      const query = wx.createSelectorQuery()
      query.selectAll('.rightBlock').boundingClientRect()
      query.selectViewport().scrollOffset()
      query.exec(function (res) {
        console.log(res); // 拿到每一个的高度并且存起来
        res[0].map(val => {
          initNum += val.height; // 实现高度的累加
          initArr.push(initNum); // 将;累加出来的高度push到数组
        })
        _this.setData({
          heightArr: initArr
        })
      })
    }, 300);
  },
  // 左侧点击事件
  leftClickFn(e) {
    console.log(e.target.dataset.myid);
    this.setData({
      leftActiveNum: e.target.dataset.myid,
      leftId: 'left' + e.target.dataset.myid,
      rightId: 'right' + e.target.dataset.myid
    })
  },
  // 右侧滚动事件
  rightScrollFn(e) {
    let st = e.detail.scrollTop
    let myArr = this.data.heightArr
    for (let i = 0; i < myArr.length; i++) {
      if (st >= myArr[i] && st < myArr[i + 1]) {
        this.setData({
          leftId: 'left' + i,
          leftActiveNum: i
        })
        return;
      }
    }
  }
})